<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景区领导决策-客流统计</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/page.css">
</head>
<body>
    <div class="box">
        <div class="header head-font">客流统计</div>
      
        <ul class="content-box">
          <li>
            <h3 class="title tit-font">近一周游客接待数分析</h3>
            <div class="my-chart" id="myChart8"></div>
          </li>
          <li>
            <h3 class="title tit-font">未来7日游客预测</h3>
            <div class="my-chart" id="myChart9"></div>
          </li>
        </ul>
      </div>
    <script src="../plugin/ECharts/echarts.js"></script>
    <script src="../plugin/jquery-1.11.1.min.js"></script>
    <script>
function drawLine8 () {
     let data = [457, 574, 398, 264, 598, 368, 546]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('myChart8'))
      // 绘制图表
      var option = {
        grid: {
          top: '8%',
          left: '4%',
          right: '4%',
          bottom: '8%'// 也可设置left和right设置距离来控制图表的大小
        },
        xAxis: {
          data: ['01/19', '01/20', '01/21', '01/22', '01/23', '01/24', '01/25'],
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: 'rgba(202,202,204,0.5)'
            }
          },
          axisTick: {
            show: true // 隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#999' // X轴文字颜色
            }
          }

        },
        yAxis: [{
          show: false,
          type: 'value',
          name: '亿元',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ebf8ac'
            }
          }
        },
        {
          show: false,
          type: 'value',
          name: '同比',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: '{value} %', // 右侧Y轴文字显示
            textStyle: {
              color: '#ebf8ac'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 0,
          min: 50,
          max: 100,
          splitNumber: 8,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
            }
          }
        }
        ],
        series: [{
          name: '游客接待数量',
          type: 'line',
          yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, // 平滑曲线显示
          showAllSymbol: true, // 显示所有图形。
          symbol: 'circle', // 标记的图形为实心圆
          symbolSize: 8, // 标记的大小
          itemStyle: {
            // 折线拐点标志的样式
            color: '#3CAA59'
          },
          lineStyle: {
            color: '#3CAA59'
          },
          data: data
        }, {
          name: '游客接待数量',
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(60,170,89,0.6)'
              },
              {
                offset: 1,
                color: 'rgba(60,170,89,0)'
              }
              ])
            }
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#3CAA59',
              fontFamily: 'DIN-Medium'
            }
          },
          data: data
        }
        ]
      }
      myChart.setOption(option)
    }
     function drawLine9 () {
         let data = [457, 574, 398, 264, 598, 368, 546]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('myChart9'))
      // 绘制图表
      var option = {
        grid: {
          top: '8%',
          left: '4%',
          right: '4%',
          bottom: '8%'// 也可设置left和right设置距离来控制图表的大小
        },
        xAxis: {
          data: ['01/19', '01/20', '01/21', '01/22', '01/23', '01/24', '01/25'],
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: 'rgba(202,202,204,0.5)'
            }
          },
          axisTick: {
            show: true // 隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#999' // X轴文字颜色
            }
          }

        },
        yAxis: [{
          show: false,
          type: 'value',
          name: '亿元',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ebf8ac'
            }
          }
        },
        {
          show: false,
          type: 'value',
          name: '同比',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: '{value} %', // 右侧Y轴文字显示
            textStyle: {
              color: '#ebf8ac'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 0,
          min: 50,
          max: 100,
          splitNumber: 8,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
            }
          }
        }
        ],
        series: [{
          name: '游客接待数量',
          type: 'line',
          yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, // 平滑曲线显示
          showAllSymbol: true, // 显示所有图形。
          symbol: 'circle', // 标记的图形为实心圆
          symbolSize: 8, // 标记的大小
          itemStyle: {
            // 折线拐点标志的样式
            color: '#EF7956'
          },
          lineStyle: {
            color: '#EF7956'
          },
          data: data
        }, {
          name: '游客接待数量',
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(239,121,86,0.6)'
              },
              {
                offset: 1,
                color: 'rgba(239,121,86,0)'
              }
              ])
            }
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#EF7956',
              fontFamily: 'DIN-Medium'
            }
          },
          data:data
        }
        ]
      }
      myChart.setOption(option)
    }
    drawLine8()
    drawLine9()
    </script>
</body>
</html>